<template>
    <div>
        <table-dialog ref="dialogRef" title="部门列表" width="90%" :showFooter="false">
            <template #default>
                <div class="mod-home">
                    <div class="left w50 pr20 bgwhite">
                        <table-grid
                            ref="bmTableRef"
                            style="height: 100%;"
                            :button-list="buttonList"
                            tableTitle="参与部门"
                            :tableColumn="bmTableColumn"
                            :tableData="bmTableData"
                            @btnClick="bmBtnClick"
                        ></table-grid>
                    </div>
                    <div class="fenge"></div>
                    <div class="right w50 pl20 bgwhite">
                        <table-grid
                            ref="ryTableRef"
                            style="height: 100%;"
                            :button-list="buttonList"
                            tableTitle="参与人员"
                            :tableColumn="ryTableColumn"
                            :tableData="ryTableData"
                            @btnClick="ryBtnClick"
                        ></table-grid>
                    </div>
                </div>
            </template>
        </table-dialog>
    </div>
</template>

<script>
export default {
    components: {
    
    },
	data () {
		return {
			dialogTableVisible: false,
			buttonList: [
                {name: "保存",code: "save",type: "success"},
                {name: "新增",code: "add",type: "primary"},
                {name: "删除",code: "delete",type: "danger"},
			],
			bmTableColumn: [
				{type: 'seq', width: 60},
				{type: 'checkbox', width: 50},
				{field: 'code', title: '部门代码', editRender: {name: 'VxeInput', props: { clearable: true }}},
				{field: 'name', title: '部门名称', editRender: {name: 'VxeInput', props: { clearable: true }}},
				{field: 'xs', title: '销售目标',editRender: {name: 'VxeInput', props: { type: "number", clearable: true }}},
				{field: 'hk', title: '回款目标',editRender: {name: 'VxeInput', props: { type: "number", clearable: true }}},
				{field: 'fy', title: '费用目标',editRender: {name: 'VxeInput', props: { type: "number", clearable: true }}},
				{field: "ctrl", title: "操作", fixed:"right", width: 100,
					slots: {default: ({ row, column }) => {
							return [
								<div>
									<el-button size="small" type="primary">历史查询</el-button>
								</div>
							]
						},
					}
				},
			],
			bmTableData: [
				{
					code: "person001",
					name: "部门名称001",
					xs: 2000,
					hk: 2000,
					fy: 2000,
				},
				{
					code: "person002",
					name: "部门名称002",
					xs: 2000,
					hk: 2000,
					fy: 2000,
				},
			],
            ryTableColumn: [
                {type: 'seq', width: 60},
                {type: 'checkbox', width: 50},
                {field: 'code', title: '人员代码', editRender: {name: 'VxeInput', props: { clearable: true }}},
                {field: 'name', title: '人员名称', editRender: {name: 'VxeInput', props: { clearable: true }}},
                {field: 'xs', title: '销售目标',editRender: {name: 'VxeInput', props: { type: "number", clearable: true }}},
                {field: 'hk', title: '回款目标',editRender: {name: 'VxeInput', props: { type: "number", clearable: true }}},
                {field: 'fy', title: '费用目标',editRender: {name: 'VxeInput', props: { type: "number", clearable: true }}},
                {field: "ctrl", title: "操作", fixed:"right", width: 100,
                    slots: {default: ({ row, column }) => {
                            return [
                                <div>
                                    <el-button size="small" type="primary" onClick={() => {this.oprClick(row)}}>事项维护</el-button>
                                </div>
                            ]
                        },
                    }
                },
            ],
            ryTableData: [
                {
                    code: "person001",
                    name: "部门名称001",
                    xs: 2000,
                    hk: 2000,
                    fy: 2000,
                },
                {
                    code: "person002",
                    name: "部门名称002",
                    xs: 2000,
                    hk: 2000,
                    fy: 2000,
                },
            ],
		}
	},
	mounted () {

	},
	methods: {
		init(){
			this.$refs.dialogRef.openDialog();
		},
        oprClick(){
            this.$refs.somthingRef.init();
        },
        bmBtnClick(btn){
            switch (btn.code) {
                case "add":
                    this.$refs.bmTableRef.insert();
            }
        },
        ryBtnClick(btn){
            switch (btn.code) {
                case "add":
                    this.$refs.ryTableRef.insert();
            }
        },
	}
}
</script>

<style lang="scss" scoped>
.mod-home{
    display: flex;
    justify-content: space-between;
    background-color: #f1f1f1;
}
.fenge{
    width: 5px;
    background-color: #f1f1f1;
    height: 100%;
}
</style>
